<template>
  <div class="container">
    <div class="hero-section">
      <h1 class="hero-title">
        <span class="gradient-text">AI角色聊天</span>
        <div class="sparkle">✨</div>
      </h1>
      <p class="hero-subtitle">选择一个AI角色，开启奇妙的对话之旅</p>
      <div class="hero-decoration">
        <div class="floating-orb orb-1"></div>
        <div class="floating-orb orb-2"></div>
        <div class="floating-orb orb-3"></div>
      </div>
    </div>
    
    <!-- 搜索框 -->
    <div class="search-container">
      <input
        v-model="searchKeyword"
        type="text"
        class="input"
        placeholder="搜索AI角色..."
        @input="handleSearch"
      />
      <button @click="handleSearch" class="btn btn-primary">搜索</button>
    </div>

    <!-- 错误提示 -->
    <div v-if="roleStore.error" class="error-message">
      {{ roleStore.error }}
    </div>

    <!-- 加载状态 -->
    <div v-if="roleStore.loading" class="loading">
      正在加载角色列表...
    </div>

    <!-- 角色列表 -->
    <div v-else-if="roleStore.filteredRoles.length > 0" class="roles-grid">
      <div
        v-for="role in roleStore.filteredRoles"
        :key="role.id"
        class="role-card"
        @click="selectRole(role)"
      >
        <div class="role-avatar">
          <img 
            :src="getAvatarUrl(role.avatar)" 
            :alt="role.name"
            @error="handleImageError"
            class="avatar-image"
          />
        </div>
        <div class="role-content">
          <h3>{{ role.name }}</h3>
          <p>{{ role.description }}</p>
          <div class="role-meta">
            <span class="role-category">{{ role.category || '通用' }}</span>
            <div class="role-tags" v-if="role.tags && role.tags.length > 0">
              <span v-for="tag in role.tags.slice(0, 3)" :key="tag" class="tag">
                {{ tag }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="empty-state">
      <p>没有找到匹配的角色</p>
      <button @click="clearSearch" class="btn btn-secondary">清除搜索</button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useRoleStore } from '../stores/roleStore'

export default {
  name: 'Home',
  setup() {
    const router = useRouter()
    const roleStore = useRoleStore()
    const searchKeyword = ref('')

    // 页面加载时获取角色列表
    onMounted(() => {
      roleStore.fetchRoles()
    })

    // 处理搜索
    const handleSearch = () => {
      if (searchKeyword.value.trim()) {
        roleStore.searchRoles(searchKeyword.value)
      } else {
        roleStore.fetchRoles()
      }
    }

    // 清除搜索
    const clearSearch = () => {
      searchKeyword.value = ''
      roleStore.fetchRoles()
    }

    // 选择角色
    const selectRole = (role) => {
      router.push(`/chat/${role.id}`)
    }

    // 获取头像URL
    const getAvatarUrl = (avatar) => {
      if (!avatar) {
        return '/default-avatar.svg' // 默认头像
      }
      
      // 如果是完整的URL，直接返回
      if (avatar.startsWith('http')) {
        return avatar
      }
      
      // 如果是相对路径，通过代理路径访问头像文件
      return `/api/${avatar}`
    }

    // 处理头像加载错误
    const handleImageError = (event) => {
      event.target.src = '/default-avatar.svg'
    }

    return {
      roleStore,
      searchKeyword,
      handleSearch,
      clearSearch,
      selectRole,
      getAvatarUrl,
      handleImageError
    }
  }
}
</script>

<style scoped>
/* Hero Section */
.hero-section {
  text-align: center;
  padding: 60px 0 40px;
  position: relative;
  overflow: hidden;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 16px;
  position: relative;
  display: inline-block;
}

.gradient-text {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(30deg); }
}

.sparkle {
  position: absolute;
  top: -10px;
  right: -20px;
  font-size: 2rem;
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin-bottom: 40px;
  font-weight: 300;
  letter-spacing: 0.5px;
}

/* 浮动装饰球 */
.hero-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.floating-orb {
  position: absolute;
  border-radius: 50%;
  background: var(--gradient-accent);
  opacity: 0.1;
  animation: float 6s ease-in-out infinite;
}

.orb-1 {
  width: 80px;
  height: 80px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.orb-2 {
  width: 60px;
  height: 60px;
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}

.orb-3 {
  width: 40px;
  height: 40px;
  top: 40%;
  left: 80%;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(120deg); }
  66% { transform: translateY(10px) rotate(240deg); }
}

.error-message {
  background: rgba(255, 107, 107, 0.1);
  color: var(--accent-red);
  padding: 16px 20px;
  border-radius: 16px;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 107, 107, 0.3);
  backdrop-filter: blur(10px);
}

.loading {
  text-align: center;
  padding: 60px 40px;
  color: var(--text-secondary);
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.loading::before {
  content: '';
  width: 40px;
  height: 40px;
  border: 3px solid var(--surface-glass);
  border-top: 3px solid var(--accent-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.empty-state {
  text-align: center;
  padding: 60px 40px;
  color: var(--text-secondary);
}

.empty-state p {
  margin-bottom: 24px;
  font-size: 18px;
  color: var(--text-primary);
}

.role-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
}

.role-avatar {
  flex-shrink: 0;
  position: relative;
}

.avatar-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--surface-glass);
  transition: all 0.3s ease;
  box-shadow: var(--shadow-soft);
}

.role-card:hover .avatar-image {
  border-color: var(--accent-blue);
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
}

.role-avatar::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  background: var(--gradient-accent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.role-card:hover .role-avatar::after {
  opacity: 0.2;
}

.role-content {
  flex: 1;
}

.role-content h3 {
  margin-bottom: 12px;
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 700;
}

.role-content p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
  font-size: 15px;
}

.role-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.role-category {
  background: var(--surface-glass);
  color: var(--accent-blue);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  align-self: flex-start;
  border: 1px solid rgba(0, 212, 255, 0.3);
  backdrop-filter: blur(10px);
}

.role-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  background: var(--gradient-accent);
  color: white;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 500;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease;
}

.tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
}
</style>
